<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户列表</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<body>
<table id="userList"></table>

<script src="../layui/layui.js"></script>
<script src="../js/jQuery3.6.1.js"></script>
<script>

    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#userList'
            // , height: 312
            , url: '/user/page' // 数据接口，注意前面要加斜杠，table组件默认会传递page,limit参数
            , parseData: function (res) {
                console.log("返回数据", res);
                // 将返回数据解析成layui table组件识别的数据格式
                return {
                    "code": 0,
                    "count": res.total,
                    "data": res.records
                    // "count": res.length,
                    // "data": res
                };
            }
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'name', title: '姓名', width: 80}
                , {field: 'age', title: '年龄', width: 80, sort: true}
                , {
                    field: 'status', title: '状态', width: 80, templet: function (d) {
                        return d.status === 0 ? "启用" : "禁用";
                    }
                }
                , {field: 'createUser', title: '创建人', width: 177}
                , {field: 'createTime', title: '创建时间', width: 80, sort: true}
            ]]
        });

    });
</script>
</body>
</html>